<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单服务</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .status {
            padding: 5px 10px;
            border-radius: 3px;
            font-weight: bold;
        }
        .completed {
            background-color: #4CAF50;
            color: white;
        }
        .processing {
            background-color: #2196F3;
            color: white;
        }
        .shipped {
            background-color: #FF9800;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>订单管理系统</h1>
        <div id="ordersList">
            <table>
                <thead>
                    <tr>
                        <th>订单号</th>
                        <th>产品ID</th>
                        <th>数量</th>
                        <th>总价</th>
                        <th>订单日期</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody id="ordersTableBody">
                    <!-- 订单数据将在这里动态加载 -->
                </tbody>
            </table>
        </div>
    </div>

    <script>
        // 页面加载时获取订单数据
        window.onload = function() {
            fetchOrders();
        };

        // 获取订单数据
        function fetchOrders() {
            fetch('/api/orders')
                .then(response => response.json())
                .then(data => {
                    const tableBody = document.getElementById('ordersTableBody');
                    tableBody.innerHTML = '';
                    
                    data.forEach(order => {
                        const row = document.createElement('tr');
                        
                        // 设置状态样式类
                        let statusClass = '';
                        if (order.status === '已完成') {
                            statusClass = 'completed';
                        } else if (order.status === '处理中') {
                            statusClass = 'processing';
                        } else if (order.status === '已发货') {
                            statusClass = 'shipped';
                        }
                        
                        // 格式化日期
                        const orderDate = new Date(order.orderDate).toLocaleString();
                        
                        row.innerHTML = `
                            <td>${order.orderNumber}</td>
                            <td>${order.productId}</td>
                            <td>${order.quantity}</td>
                            <td>¥${order.totalAmount}</td>
                            <td>${orderDate}</td>
                            <td><span class="status ${statusClass}">${order.status}</span></td>
                        `;
                        
                        tableBody.appendChild(row);
                    });
                })
                .catch(error => {
                    console.error('获取订单数据时出错:', error);
                });
        }
    </script>
</body>
</html> 